<template>
  <div class="center-wrapper">
    <centerHeader/>

    <div class="info-wrap" v-if="user_type == 0">
      <ul>
        <li>
          <p>
            <span class="title-01">{{user_info.user_score}}</span>
            <span class="title-02">积分</span>
          </p>
        </li>

        <li>
          <p>
            <span class="title-01">{{user_info.quan_count}}</span>
            <span class="title-02">券</span>
          </p>
        </li>

        <li>
          <router-link :to="{ name: 'collect' }">
            <p>
              <span class="title-01">{{user_info.collect_count}}</span>
              <span class="title-02">关注</span>
            </p>
          </router-link>
        </li>

        <!-- <li>
          <p>
            <span class="title-01">{{user_info.zan_count}}</span>
            <span class="title-02">点赞</span>
          </p>
        </li> -->
      </ul>
    </div>
    <div class="info-wrap1" v-else-if="user_type == 1"></div>

    <div class="info-wrap2" v-else-if="user_type == 2">
      <div class="agent_box">
        <div @click="go_commission">
          <div>{{user_info.total_commission}}</div>
          <div>累计佣金</div>
        </div>

        <div @click="go_store">
          <div>{{user_info.store_count}}</div>
          <div>门店</div>
        </div>
      </div>
    </div>
    <div class="info-wrap2" v-else-if="user_type == 3">
      <div class="agent_box">
        <div @click="go_fanli">
          <div>{{user_info.total_commission}}</div>
          <div>累计返现</div>
        </div>

        <div @click="go_customer">
          <div>{{user_info.store_user_count}}</div>
          <div>顾客</div>
        </div>
      </div>
    </div>
    <div class="info-wrap2" v-else-if="user_type == 'store'">
      <div class="agent_box">
        <div @click="go_fanli">
          <div>{{user_info.store_fanli}}</div>
          <div>累计返现</div>
        </div>
        <div @click="go_commission">
          <div>{{user_info.total_commission}}</div>
          <div>累计佣金</div>
        </div>

        <div @click="go_customer">
          <div>{{user_info.store_user_count}}</div>
          <div>顾客</div>
        </div>
      </div>
    </div>
    <div class="centerCate-wrap">
      <ul v-if="user_type == 0">
        <li>
          <p>
            <router-link :to="{ name: 'order', params: {} }">
              <i class="icon iconfont icon-dingdan icon-01"></i>
              <span class="title-01">我的订单</span>
              <i class="icon iconfont icon-right1 icon-02"></i>
            </router-link>
          </p>
        </li>

        <li>
          <p>
            <router-link :to="{ name: 'integration', params: {} }">
              <i class="icon iconfont icon-jifen icon-01"></i>
              <span class="title-01">我的积分</span>
              <i class="icon iconfont icon-right1 icon-02"></i>
            </router-link>
          </p>
        </li>

        <li>
          <p>
            <router-link :to="{ name: 'mall', params: {} }">
              <i class="icon iconfont icon-weibiaoti2fuzhi14 icon-01"></i>
              <span class="title-01">积分商城</span>
              <i class="icon iconfont icon-right1 icon-02"></i>
            </router-link>
          </p>
        </li>

        <li>
          <p>
            <router-link :to="{ name: 'coupon', params: {} }">
              <i class="icon iconfont icon-Coupon icon-01"></i>
              <span class="title-01">我的优惠券</span>
              <i class="icon iconfont icon-right1 icon-02"></i>
            </router-link>
          </p>
        </li>

        <!-- <li>
          <p>
            <router-link :to="{ name: 'qrcode', params: {} }">
              <i class="icon iconfont icon-erweima icon-01"></i>
              <span class="title-01">我的推广码</span>
              <i class="icon iconfont icon-right1 icon-02"></i>
            </router-link>
          </p>
        </li>-->

        <li>
          <p>
            <router-link :to="{ name: 'account', params: {} }">
              <i class="icon iconfont icon-shezhi icon-01"></i>
              <span class="title-01">账号设置</span>
              <i class="icon iconfont icon-right1 icon-02"></i>
            </router-link>
          </p>
        </li>
      </ul>

      <ul v-else-if="user_type == 1" style="border: none">
        <li>
          <p>
            <router-link :to="{ name: 'shop', params: {} }">
              <i class="mendian"></i>
              <span class="title-01">我的门店</span>
              <i class="icon iconfont icon-right1 icon-02"></i>
            </router-link>
          </p>
        </li>
        <li>
          <p>
            <router-link :to="{ name: 'qrcodestore', params: {} }">
              <i class="icon iconfont icon-erweima icon-01"></i>
              <span class="title-01">我的推广码</span>
              <i class="icon iconfont icon-right1 icon-02"></i>
            </router-link>
          </p>
        </li>

        <li>
          <p>
            <router-link :to="{ name: 'account', params: {} }">
              <i class="icon iconfont icon-shezhi icon-01"></i>
              <span class="title-01">账号设置</span>
              <i class="icon iconfont icon-right1 icon-02"></i>
            </router-link>
          </p>
        </li>
      </ul>

      <ul v-else-if="user_type == 2">
        <li>
          <p>
            <router-link :to="{ name: 'shop', params: {} }">
              <i class="mendian"></i>
              <span class="title-01">我的门店</span>
              <i class="icon iconfont icon-right1 icon-02"></i>
            </router-link>
          </p>
        </li>
        <li>
          <p>
            <router-link :to="{ name: 'qrcodestore', params: {} }">
              <i class="icon iconfont icon-erweima icon-01"></i>
              <span class="title-01">我的推广码</span>
              <i class="icon iconfont icon-right1 icon-02"></i>
            </router-link>
          </p>
        </li>
        <li>
          <p>
            <router-link :to="{ name: 'commission', params: {} }">
              <i class="tixian"></i>
              <span class="title-01">提现</span>
              <i class="icon iconfont icon-right1 icon-02"></i>
            </router-link>
          </p>
        </li>
        <li>
          <p>
            <router-link :to="{ name: 'account', params: {} }">
              <i class="icon iconfont icon-shezhi icon-01"></i>
              <span class="title-01">账号设置</span>
              <i class="icon iconfont icon-right1 icon-02"></i>
            </router-link>
          </p>
        </li>
      </ul>
      <ul v-else-if="user_type == 3">
        <li>
          <p>
            <router-link :to="{ name: 'customerList', params: {} }">
              <i class="guke"></i>
              <span class="title-01">我的顾客</span>
              <i class="icon iconfont icon-right1 icon-02"></i>
            </router-link>
          </p>
        </li>
        <li>
          <p>
            <router-link :to="{ name: 'qrcode', params: {} }">
              <i class="icon iconfont icon-erweima icon-01"></i>
              <span class="title-01">我的推广码</span>
              <i class="icon iconfont icon-right1 icon-02"></i>
            </router-link>
          </p>
        </li>
        <li>
          <p>
            <router-link :to="{ name: 'cash', params: {} }">
              <i class="tixian"></i>
              <span class="title-01">提现</span>
              <i class="icon iconfont icon-right1 icon-02"></i>
            </router-link>
          </p>
        </li>
        <li>
          <p>
            <router-link :to="{ name: 'account', params: {} }">
              <i class="icon iconfont icon-shezhi icon-01"></i>
              <span class="title-01">账号设置</span>
              <i class="icon iconfont icon-right1 icon-02"></i>
            </router-link>
          </p>
        </li>
      </ul>

      <ul v-else-if="user_type == 'store'">
        <li>
          <p>
            <router-link :to="{ name: 'shop', params: {} }">
              <i class="mendian"></i>

              <span class="title-01">我的门店</span>
              <i class="icon iconfont icon-right1 icon-02"></i>
            </router-link>
          </p>
        </li>
        <li>
          <p>
            <router-link :to="{ name: 'saleman', params: {} }">
              <i class="dianyuan"></i>
              <span class="title-01">我的店员</span>
              <i class="icon iconfont icon-right1 icon-02"></i>
            </router-link>
          </p>
        </li>
        <li>
          <p>
            <router-link :to="{ name: 'customerList', params: {} }">
              <i class="guke"></i>
              <span class="title-01">我的顾客</span>
              <i class="icon iconfont icon-right1 icon-02"></i>
            </router-link>
          </p>
        </li>
        <li>
          <p>
            <router-link :to="{ name: 'qrcodestore', params: {} }">
              <i class="icon iconfont icon-erweima icon-01"></i>
              <span class="title-01">我的推广码</span>
              <i class="icon iconfont icon-right1 icon-02"></i>
            </router-link>
          </p>
        </li>
        <li>
          <p>
            <router-link :to="{ name: 'cash', params: {} }">
              <i class="tixian"></i>
              <span class="title-01">提现</span>
              <i class="icon iconfont icon-right1 icon-02"></i>
            </router-link>
          </p>
        </li>
        <li>
          <p>
            <router-link :to="{ name: 'withdraw', params: {} }">
              <i class="tixian"></i>
              <span class="title-01">员工提现申请</span>
              <i class="icon iconfont icon-right1 icon-02"></i>
            </router-link>
          </p>
        </li>
        <li>
          <p>
            <router-link :to="{ name: 'account', params: {} }">
              <i class="icon iconfont icon-shezhi icon-01"></i>
              <span class="title-01">账号设置</span>
              <i class="icon iconfont icon-right1 icon-02"></i>
            </router-link>
          </p>
        </li>
      </ul>
    </div>

    <centerFooter/>
  </div>
</template>

<script type="text/ecmascript-6">
import centerHeader from "@/views/center/components/centerHeader";
import centerFooter from "@/views/center/components/centerFooter";
import constant from "@/utils/constant.js";
// 引用API文件
import http from "@/utils/http.js";

export default {
  name: "center",
  data() {
    return {
      user_info: {
        score: 0,
        quan_count: 0,
        collect_count: 0,
        zan_count: 0,
        total_commission: 0,
        uid: "",
        store_count: 0
      },
      user_type: "0"
    };
  },
  components: {
    centerHeader,
    centerFooter
  },
  methods: {
    userinfo() {
      http.get(this, {
        url: "ucenter/user_info",
        data: {
          token: localStorage.getItem("user_token")
        },
        dataType: "json",
        success: function(data) {
          console.log("用户信息:", data);
          if (data.status == 1) {
            this.user_info = data.info;
            this.user_type = data.info.user_type;
            this.total_commission = data.info.total_commission;
            this.store_count = data.info.store_count;
            localStorage.setItem("user_name", data.info.username);
            localStorage.setItem("user_head", data.info.headimgurl);
            localStorage.setItem("user_type", data.info.user_type);
            if (!this.user_info.mobile) {
              this.$router.push({
                path: "/login/bindmobile",
                query: { store_id: this.user_info.store_id }
              });
            }
          } else {
          }
        }
      });
    },
    storeinfo() {
      http.get(this, {
        url: "store/store_info",
        data: {
          token: localStorage.getItem("user_token")
        },
        dataType: "json",
        success: function(data) {
          console.log("门店信息:", data);
          if (data.status == 1) {
            this.user_info = data.info;
            this.user_type = "store";
            // this.total_commission = data.info.total_commission;
            // this.store_count = data.info.store_count;
            localStorage.setItem("user_name", data.info.store_name);
            //localStorage.setItem("user_head", data.info.headimgurl);
            localStorage.setItem("user_type", "store");
          } else {
          }
        }
      });
    },
    go_commission() {
      if (this.user_type == "store") {
        this.$router.push({
          path: "/center/commission",
          query: { store_id: this.user_info.store_id }
        });
      } else {
        this.$router.push({
          path: "/center/commission",
          query: { id: this.user_info.uid }
        });
      }
    },
    go_fanli() {
      if (this.user_type == "store") {
        this.$router.push({
          path: "/center/fanli",
          query: { store_id: this.user_info.store_id }
        });
      } else {
        this.$router.push({
          path: "/center/fanli",
          query: { id: this.user_info.uid }
        });
      }
    },
    go_customer() {
      if (this.user_type == "store") {
        this.$router.push({
          path: "/center/customerList",
          query: { store_id: this.user_info.store_id }
        });
      } else {
        this.$router.push({
          path: "/center/customerList",
          query: { id: this.user_info.uid }
        });
      }
    },
    go_store(){
      this.$router.push({
          name: "shop"
        });
    }
  },
  created() {},
  activated() {
    let user_type = localStorage.getItem("user_type");
    if (user_type == "store") {
      this.storeinfo();
    } else {
      this.userinfo();
    }
  }
};
</script>

<style scoped lang="scss">
.center-wrapper {
}

.info-wrap {
  width: 100%;
  padding: 0.32rem 0.2rem;

  ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    $letHeight: 0.8rem;

    li {
      width: 1.78rem;
      text-align: center;
      border-right: 0.02rem solid $c-gray-dark;
      line-height: $letHeight;

      &:last-child {
        border-right: none;
      }

      p {
        font-size: 0.3rem;
        color: $c-mainC;

        * {
          line-height: $letHeight/2;
          display: block;
        }
        .title-01 {
        }
        .title-02 {
        }
      }
    }
  }
}

.centerCate-wrap {
  width: 100%;

  ul {
    width: 100%;
    @extend .cmm-border;
    $letHeight: 0.75rem;

    li {
      border-top: 0.02rem solid $c-gray-dark;
      line-height: $letHeight;
      padding: 0 0.35rem;

      &:last-child {
        @extend .cmm-border;
      }

      p {
        color: $c-mainC;
        @extend .cmm-clearfix;
        height: $letHeight;

        * {
          line-height: $letHeight;
          display: inline-block;
          vertical-align: middle;
        }

        a {
          width: 100%;
        }
        .icon-01 {
          font-size: 0.3rem;
          color: $c-themeC;
          float: left;
          margin-right: 0.24rem;
          font-size: 0.4rem;
        }
        .icon-02 {
          font-size: 0.3rem;
          float: right;
        }
        .title-01 {
          font-size: 0.3rem;
          float: left;
        }
      }
    }
  }
}
.agent_box {
  display: flex;
  & > div {
    flex: 1;
    margin: 0.25rem 0;
    text-align: center;
    font-size: 0.3rem;
    & > div:first-child {
      margin-bottom: 0.1rem;
    }
  }
  & > div:first-child {
    border-right: 1px solid #eeeeee;
  }
}
.mendian {
  width: 0.4rem;
  height: 0.4rem;
  background: url("../../assets/images/mendian.png");
  background-size: cover;
  color: #bc9f5b;
  float: left;
  margin-right: 0.24rem;
  font-size: 0.4rem;
  margin-top: 0.16rem;
}
.dianyuan {
  width: 0.4rem;
  height: 0.4rem;
  background: url("../../assets/images/dianyuan.png");
  background-size: cover;
  color: #bc9f5b;
  float: left;
  margin-right: 0.24rem;
  font-size: 0.4rem;
  margin-top: 0.16rem;
}
.guke {
  width: 0.4rem;
  height: 0.4rem;
  background: url("../../assets/images/guke.png");
  background-size: cover;
  color: #bc9f5b;
  float: left;
  margin-right: 0.24rem;
  font-size: 0.4rem;
  margin-top: 0.16rem;
}
.tixian {
  width: 0.4rem;
  height: 0.4rem;
  background: url("../../assets/images/tixian.png");
  background-size: cover;
  color: #bc9f5b;
  float: left;
  margin-right: 0.24rem;
  font-size: 0.4rem;
  margin-top: 0.16rem;
}
</style>
